<template>
  <view>
    <u-navbar title="个人资料" title-size="36" :border-bottom="false"></u-navbar>
    <view class="form">
      <view class="item dis-flex flex-y-between flex-y-center">
        <view class="" style="font-size: 28rpx">头像</view>
        <view class="value">
          <u-avatar size="120" :src="userInfo.avatar"></u-avatar>
        </view>
      </view>
      <view class="item">
        <view class="label">呢称</view>
        <view class="value dis-flex flex-y-between flex-y-center">
          <input placeholder="请输入呢称" class="input" v-model="userInfo.nickname" />
          <u-icon name="/static/more.png" size="28"></u-icon>
        </view>
      </view>
      <view class="item">
        <view class="label">性别</view>
        <view
          @click="onPicker('selector', 'gender')"
          class="value dis-flex flex-y-between flex-y-center"
        >
          <input placeholder="请选择性别" disabled v-model="userInfo.gender" />
          <u-icon name="/static/more.png" size="28"></u-icon>
        </view>
      </view>
      <view class="item">
        <view class="label">生日</view>
        <view @click="onPicker('time')" class="value dis-flex flex-y-between flex-y-center">
          <input placeholder="请选择出生日期" disabled v-model="userInfo.birthday" />
          <u-icon name="/static/more.png" size="28"></u-icon>
        </view>
      </view>
      <view class="item">
        <view class="label">学校</view>
        <view class="value dis-flex flex-y-between flex-y-center">
          <input placeholder="请选择或输入学校" v-model="userInfo.school" />
          <u-icon name="/static/more.png" size="28"></u-icon>
        </view>
      </view>
      <view class="item">
        <view class="label">所在地</view>
        <view @click="onPicker('region')" class="value dis-flex flex-y-between flex-y-center">
          <input placeholder="请选择地址" disabled v-model="userInfo.address" />
          <u-icon name="/static/more.png" size="28"></u-icon>
        </view>
      </view>
      <view class="item">
        <view class="label">简介</view>
        <view class="value dis-flex flex-y-between flex-y-center">
          <input placeholder="请输入个人简介" v-model="userInfo.desc" />
          <u-icon name="/static/more.png" size="28"></u-icon>
        </view>
      </view>
    </view>
    <u-picker
      :mode="mode"
      v-model="show"
      :range="range"
      @confirm="confirmSelctor"
      :range-key="rangeKey"
    ></u-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      rangeKey: '',
      range: [],
      mode: 'selector',
      regionGenderList: [
        {
          gender: '男',
          value: '男'
        },
        {
          gender: '女',
          value: '女'
        }
      ],
      show: false,
      userInfo: {
        nickname: '幕刃',
        avatar: '',
        gender: '男',
        birthday: '1999-09-27',
        school: '华中科技大学',
        address: '',
        desc: '个人简介'
      }
    }
  },
  methods: {
    onPicker(e, f) {
      this.mode = e
      console.log(e, f)
      if (f == 'gender') {
        this.rangeKey = 'gender'
        this.range = this.regionGenderList
      } else if (f == 'rule') {
        this.rangeKey = 'data'
        this.range = this.regionRuleList
      }
      this.show = true
    },
    confirmSelctor(e) {
      console.log(e)
      if (this.mode == 'selector') {
        if (this.rangeKey == 'gender') {
          this.userInfo.gender = this.range[e].value
        }
      } else if (this.mode == 'time') {
        this.userInfo.birthday = e.year + '-' + e.month + '-' + e.day
      } else {
        // this.region = e
        this.userInfo.address = e.province.label + e.city.label + e.area.label
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.form {
  .item {
    padding: 30rpx 30rpx 24rpx 30rpx;
    border-bottom: 1rpx solid #dfe0e6;
    .label {
      font-weight: 500;
      font-size: 30rpx;
      color: #333333;
    }
    .value {
      input {
        font-size: 28rpx;
        color: #999999;
        margin-top: 20rpx;
      }
    }
  }
}
</style>
